import React,{useEffect, useState} from 'react';
import service from '../../api'
import { Layout,Menu,Dropdown } from 'antd'

import type { MenuProps } from 'antd';

import { MenuUnfoldOutlined, HomeOutlined,MenuFoldOutlined, RightSquareOutlined,UserSwitchOutlined,ProfileOutlined,UsergroupAddOutlined,FundProjectionScreenOutlined,EditOutlined,AuditOutlined,FileExcelOutlined } from '@ant-design/icons';
import { Outlet, useNavigate } from 'react-router-dom';
import { useSelector,useDispatch } from 'react-redux'

import "./Index.scss"
import MyBread from '../../components/MyBread'
import filterRoutes from '../../utils/permission'

type MenuItem = Required<MenuProps>['items'][number];

const { Header, Footer, Sider, Content } = Layout;

interface Props {}

function Index(props:Props) {
    
    var [collapsed,setCollapsed] = useState(false)

    var userInfo = useSelector((state:any)=>state.userInfo)
    var keyPath = useSelector((state:any)=>state.keyPath)

    var dispatch = useDispatch()
    
    var navigate = useNavigate();

    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
        type?: string,
      ): MenuItem {
        return {
          key,
          icon,
          children,
          label,
          type,
        } as MenuItem;
    }
    
    var items: MenuItem[] = [
        getItem('首页', '/index/home', <HomeOutlined />,undefined,'0'),
        getItem('轮播图管理', 'swiper', <RightSquareOutlined />, [
          getItem('轮播图列表', '/index/swiper',<></>,undefined,'1-1')
        ],'1'),
        getItem('账号管理', 'admin', <UsergroupAddOutlined />, [
          getItem('管理员列表', '/index/admin',<></>,undefined,'2-1')
        ],'2'),
        getItem('产品管理', 'pro', <ProfileOutlined />, [
          getItem('产品列表', '/index/pro',<></>,undefined,'3-1'),
          getItem('秒杀列表', '/index/seckill',<></>,undefined,'3-2'),
          getItem('推荐列表', '/index/command',<></>,undefined,'3-3'),
          getItem('筛选列表', '/index/search',<></>,undefined,'3-4'),
        ],'3'),
        getItem('数据可视化', 'echarts', <FundProjectionScreenOutlined />, [
          getItem('echarts使用', '/index/echarts',<></>,undefined,'4-1')
        ],'4'),
        getItem('编辑器', 'editor', <EditOutlined />, [
          getItem('编辑器使用', '/index/editor',<></>,undefined,'5-1')
        ],'5'),
        getItem('excel管理', 'excel', <FileExcelOutlined />, [
          getItem('excel使用', '/index/excel',<></>,undefined,'6-1')
        ],'6'),
        getItem('地图管理', 'map', <AuditOutlined />, [
          getItem('百度地图', '/index/map',<></>,undefined,'7-1')
        ],'7'),
    ];

    //过滤权限菜单
    items = filterRoutes(items,userInfo.checkedkeys);

    var onexit = ()=>{
      dispatch({type:'REMOVE_USERINFO'});
      navigate('/login');
    }

    const dropdownitems: MenuProps['items'] = [
      {
        key: '1',
        label: (
          <div>设置</div>
        ),
      },
      {
        key: '2',
        label: (
          <div onClick={onexit}>退出</div>
        ),
      },
    ] 

    var onClick = ({ item, key, keyPath } : any)=>{
      dispatch({type:'SAVE_KEYPATH',payload:keyPath })
      navigate(key);
    }

    var handleCollapse = ()=>{
      setCollapsed( !collapsed )
    }
    

    return (
        <div className='index'>
            <Layout>
                <Sider theme='light' style={{ backgroundColor:'#333' }} collapsed={collapsed}>
                    <div className="title">{ !collapsed && '嗨购后台' }</div>
                    <Menu
                    defaultOpenKeys={keyPath}
                    selectedKeys={keyPath}
                    onClick={onClick}
                    mode="inline"
                    theme='dark'
                    style={{ backgroundColor:'#333' }}
                    items={items}
                    />
                </Sider>
                <Layout>
                    <Header className='header' style={{ backgroundColor:'#333' }}>
                      <div className="left" onClick={handleCollapse}>
                        {
                          collapsed ? 
                          <MenuUnfoldOutlined /> :
                          <MenuFoldOutlined />
                        }
                      </div>
                      <div className="right">
                        欢迎 : &nbsp; {userInfo.adminname}   &nbsp;
                        <Dropdown menu={{ items: dropdownitems }} placement="bottom" arrow>
                          <UserSwitchOutlined />
                        </Dropdown>
                      </div>
                    </Header>
                    <Content style={{ padding:20 }}>
                      {/* 面包屑 */}
                      <MyBread />
                      {/* 占位组件 */}
                      <Outlet />
                    </Content>
                    {/* <Footer >Footer</Footer> */}
                </Layout>
            </Layout>
        </div>
    );
}

export default Index;